<template>
    <div class="order-detail">
        <div class="order-list">
            <div class="order-item" v-for="item in orderInfo.newBeeMallOrderItemVOS" :key="item.goodsId">
                <div class="flex-b">
                    <div class="left">
                        <img :src="item.goodsCoverImg" alt="">
                    </div>
                    <div class="middle">
                        <div>{{ item.goodsName }}</div>
                        <div class="flex-a"><span class="sell">￥{{ item.sellingPrice + '' }}</span><span class="line">￥{{
                            item.originalPrice + ''
                        }}</span>
                        </div>
                        <div class="num">数量：{{ item.goodsCount }}</div>
                        <div class="back-btn">
                            <nut-button type="default" size="mini"
                                v-if="orderInfo.payStatus == 1 && orderInfo.orderStatus < 5"
                                @click="toBack(item)">退换</nut-button>
                        </div>
                    </div>
                    <div class="right">
                        {{ orderInfo.orderStatusString }}
                    </div>
                </div>
            </div>
        </div>
        <div class="title">订单信息</div>
        <div class="total flex-a">
            <div class="first">物流单号</div>
            <div class="last" @click="checkOrder">{{ orderInfo.trackingNumber ? orderInfo.trackingNumber :
                '' }}</div>
            <nut-button type="default" shape="square" size="mini" style="margin-left: 10px;" v-if='orderInfo.trackingNumber'
                @click="checkOrder">查询</nut-button>
        </div>
        <div class="total flex-a">
            <div class="first">订单编号</div>
            <div class="last">{{ orderInfo.orderNo }}</div>
            <nut-button type="default" shape="square" size="mini" style="margin-left: 10px;"
                @click="copy(orderInfo.orderNo)">复制</nut-button>
        </div>
        <div class="total flex-a">
            <div class="first">下单时间</div>
            <div class="last">{{ orderInfo.createTime }}</div>
        </div>
        <div class="total flex-a">
            <div class="first">订单金额</div>
            <div class="last">￥{{ orderInfo.totalPrice }}</div>
        </div>
        <div class="total flex-a">
            <div class="first">运费</div>
            <div class="last">￥0.00</div>
        </div>
        <div class="total flex-a">
            <div class="first">优惠金额</div>
            <div class="last">￥0.00</div>
        </div>
        <div class="total flex-a">
            <div class="first">实付金额</div>
            <div class="last">￥{{ orderInfo.totalPrice }}</div>
        </div>
        <nut-popup position="bottom" closeable round :style="{ height: '70%', background: '#F8F8F8' }"
            v-model:visible="show" class="back-pop">
            <div class="head">选择宝贝</div>
            <div class="type">
                <div class="select">请选择售后类型：</div>
                <div class="type-list flex-a">
                    <div :class="active == 0 ? 'item active' : 'item'" @click="active = 0">退货退款</div>
                    <div :class="active == 1 ? 'item active' : 'item'" @click="active = 1">换货</div>
                </div>
                <div class="remark flex-a flex-b">
                    <text>退款原因：</text>
                    <nut-menu><nut-menu-item v-model="selectorChecked" :options="selector" /></nut-menu>
                </div>
            </div>
            <div class="goods">
                <div class="order-lists">
                    <nut-checkbox-group v-model="checkboxgroup">
                        <div class="order-item" v-for="item in orderInfo.newBeeMallOrderItemVOS" :key="item.goodsId">
                            <div class="flex-b">
                                <div class="left">
                                    <img :src="item.goodsCoverImg" alt="">
                                </div>
                                <div class="middle">
                                    <div>{{ item.goodsName }}</div>
                                    <div class="flex-a"><span>￥{{ item.sellingPrice + '' }}</span><span class="line">￥{{
                                        item.originalPrice + ''
                                    }}</span>
                                    </div>
                                    <div class="num flex-a"><text>数量：</text><nut-input-number v-model="item.num"
                                            :max="item.goodsCount" /></div>
                                    <div class="back-btn">
                                        <nut-checkbox :label="item.goodsId" v-model="item.check"></nut-checkbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nut-checkbox-group>
                </div>
            </div>
            <div class="next"><nut-button type="info" block @click="next">下一步</nut-button></div>
        </nut-popup>
        <nut-popup position="bottom" closeable round :style="{ height: '80%', background: '#F8F8F8' }"
            v-model:visible="backShow" class="back-sure">
            <div class="head">确认退款信息</div>
            <div class="goods">
                <div class="order-listss">
                    <div class="order-item" v-for="item in orderInfo.newBeeMallOrderItemVOS" :key="item.goodsId">
                        <div class="flex-b">
                            <div class="left">
                                <img :src="item.goodsCoverImg" alt="">
                            </div>
                            <div class="middle">
                                <div>{{ item.goodsName }}</div>
                                <div class="flex-a"><span>￥{{ item.sellingPrice + '' }}</span><span class="line">￥{{
                                    item.originalPrice + ''
                                }}</span>
                                </div>
                                <div class="num">数量：{{ item.num }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="back-reason flex-a flex-b">
                    <text class="first">退款原因</text>
                    <text>{{ selector[selectorChecked].text }}
                        <Right color="#D5D5D5" size="12" />
                    </text>
                </div>
                <div class="upload-pic">
                    <div class="first"><text class="star">*</text>上传凭证照片</div>
                    <nut-uploader :url="uploadUrl" @success="uploadSucc" maximum="3" multiple
                        list-type="picture"></nut-uploader>
                </div>
                <div class="submit"><nut-button type="info" @click="submit" block>提交申请</nut-button></div>
            </div>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { Right } from '@nutui/icons-vue-taro';
import { requirePlugin } from '@tarojs/taro';
import { reactive, ref, toRefs, onMounted } from 'vue';
import { getOrderDetail, refOrderStatus, getDeliRefOrderInfoOnApp, getWaybillToken } from '../../../../api/index'
import { uploadUrl } from '../../../../utils'
export default {
    components: {
        Right
    },
    setup() {
        const myPluginInterface = requirePlugin('logisticsPlugin')
        const data = reactive({
            orderInfo: {},
            orderNo: '',
            show: false,
            remark: '',
            active: 0,
            checkboxgroup: [],
            backShow: false,
            uploadUrl: uploadUrl,
            urls: [],
            selector: [
                { text: '商品质量问题', value: 0 },
                { text: '商品与描述不符', value: 1 },
                { text: '发货问题', value: 2 },
                { text: '未收到商品', value: 3 },
                { text: '退款申诉', value: 4 },
                { text: '其他原因', value: 5 }
            ],
            selectorChecked: 0,
            orderStatus: '' as any,
            token: ''
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.orderNo) {
                data.orderNo = router.params.orderNo
            }
            if (router.params.orderStatus) {
                data.orderStatus = router.params.orderStatus
            }
            getOrderDetails()
        });
        const getOrderDetails = () => {
            if (data.orderStatus == 5) {
                getDeliRefOrderInfoOnApp(data.orderNo).then(res => {
                    if (res.resultCode == 200) {
                        let list = res.data
                        list.newBeeMallOrderItemVOS.forEach(item => {
                            item.num = 1
                            item.check = false
                        })
                        data.orderInfo = list
                        mitt.emit('detail', list)
                        mitt.emit("address", list.newBeeMallUserAddressVO)
                    }
                })
            } else {
                getOrderDetail(data.orderNo).then(res => {
                    if (res.resultCode == 200) {
                        let list = res.data
                        list.newBeeMallOrderItemVOS.forEach(item => {
                            item.num = 1
                            item.check = false
                        })
                        data.orderInfo = list
                        mitt.emit('detail', list)
                        mitt.emit("address", list.newBeeMallUserAddressVO)
                    }
                })
            }
        }
        const copy = (text: string) => {
            Taro.setClipboardData({
                data: text,
            }).then(() => {
                Taro.showToast({
                    title: '已复制到剪切板',
                    icon: 'none'
                })
            })
        }
        const toBack = (item) => {
            data.show = true
        }
        const next = () => {
            //console.log(data.checkboxgroup)
            if (data.checkboxgroup.length < 1) {
                Taro.showToast({
                    title: '请选择退款商品',
                    icon: 'error',
                    duration: 2000
                })
            } else {
                data.backShow = true
            }
        }
        const submit = () => {
            let list = data.orderInfo.newBeeMallOrderItemVOS
            let arr = list.filter(item => item.check == true), goodsMap = [] as any
            arr.forEach(item => {
                goodsMap.push({
                    goodsId: item.goodsId,
                    num: item.num
                })
            })
            if (data.urls.length == 0) {
                Taro.showToast({
                    title: '请上传凭证照片',
                    icon: 'error',
                    duration: 2000
                })
            } else {
                refOrderStatus({ orderNo: data.orderInfo.orderNo, refReason: data.selector[data.selectorChecked].text, refPicture: data.urls.join(','), goodsMap: goodsMap }).then(res => {
                    if (res.resultCode == 200) {
                        Taro.showToast({
                            title: '提交成功',
                            icon: 'success',
                            duration: 2000
                        })
                        data.show = false
                        data.backShow = false
                        data.selectorChecked = 0
                        data.urls = []
                        Taro.redirectTo({ url: '/pages/orderList/index' })
                    }
                })
            }
        }
        const uploadSucc = (val) => {
            let urls = data.urls as any
            if (JSON.parse(val.data.data).resultCode == 200) {
                urls.push(JSON.parse(val.data.data).message)
                data.urls = urls
            }
        }
        const checkOrder = () => {
            getWaybillToken(data.orderInfo.orderNo).then(res => {
                if (res.resultCode == 200) {
                    data.token = res.message
                    myPluginInterface.openWaybillTracking({
                        waybillToken: res.message
                    });
                }
            })
        }
        return {
            ...toRefs(data), getOrderDetails, copy, toBack, next, submit, uploadSucc, checkOrder
        }
    }
};
</script>


<style lang="scss" >
.nut-menu .nut-menu__bar {
    background-color: transparent !important;
    box-shadow: none !important;
}

.order-detail {
    .order-list {
        padding: 0 30rpx;
        border-bottom: 1rpx solid #F2F2F2;

        .order-item {
            margin-bottom: 20rpx;

            .num {
                padding-bottom: 10rpx;
            }

            .left {
                img {
                    width: 200rpx;
                    height: 200rpx;
                }

                margin-right: 20rpx;
            }

            .middle {
                width: 50%;

                div:first-child {
                    font-size: 30rpx;
                    margin-bottom: 20rpx;
                }

                .sell {
                    color: #F25C26;
                    font-size: 30rpx;
                    font-weight: bold;
                }

                .line {
                    text-decoration: line-through;
                    font-weight: normal;
                    margin-left: 10rpx;
                    font-size: 26rpx;
                }

                div:nth-child(2) {
                    color: #6B7283;
                    font-weight: bold;
                }

                div.back-btn {
                    text-align: right;
                    position: relative;
                    right: -110rpx;
                }

                div.num {
                    font-size: 30rpx;
                    margin-top: 20rpx;
                }
            }

            .right {
                text-align: right;
                white-space: nowrap;
                color: #6B7283;
                font-size: 26rpx;

                div:first-child {
                    font-size: 34rpx;
                    font-weight: bold;
                    margin-bottom: 20rpx;
                }

                div:last-child {
                    color: #6B7283;
                }
            }
        }

        .order-item:not(:last-child) {
            border-bottom: 1rpx solid #F2F2F2;
        }
    }

    .title {
        padding: 20rpx 30rpx;
        color: #212121;
        font-size: 30rpx;
    }

    .total {
        padding: 20rpx 30rpx;
        // border-bottom: 1rpx solid #F2F2F2;
        font-size: 28rpx;

        div.first {
            color: #606060;
            width: 160rpx;
        }

        div.last {
            color: #6B7283;
            text-align: left;
        }
    }

    .back-sure {
        .head {
            text-align: center;
            padding: 30rpx 0;
            font-weight: bold;
        }

        .goods {
            width: 96%;
            margin: 10rpx auto 0;
            border-radius: 10rpx;
            background: #fff;
            box-sizing: border-box;
            padding: 20rpx 0;
            position: relative;
            min-height: 1050rpx;

            .order-listss {
                padding: 0 30rpx;
                height: 600rpx;
                overflow-y: auto;
                box-sizing: border-box;

                .order-item {
                    margin-bottom: 20rpx;

                    .left {
                        img {
                            width: 200rpx;
                            height: 200rpx;
                        }

                        margin-right: 20rpx;
                    }

                    .middle {
                        width: 80%;
                        position: relative;

                        div:first-child {
                            font-size: 30rpx;
                            margin-bottom: 20rpx;
                        }

                        .line {
                            text-decoration: line-through;
                            font-weight: normal;
                            margin-left: 10rpx;
                            font-size: 26rpx;
                        }

                        div:nth-child(2) {
                            color: #6B7283;
                            font-weight: bold;
                        }

                        div.num {
                            font-size: 24rpx;
                            margin-top: 10rpx;
                        }

                        div.selNum {
                            margin-top: 10rpx;
                        }
                    }
                }

                .order-item:not(:last-child) {
                    border-bottom: 1rpx solid #F2F2F2;
                }

            }

            .back-reason {
                white-space: nowrap;
                padding: 0 30rpx;
                color: #D5D5D5;
                font-size: 26rpx;
                margin-bottom: 10rpx;

                .first {
                    color: #333;
                }

                .nut-input .input-text {
                    text-align: right !important;
                }

                .nut-input--border {
                    border: none !important;
                }
            }

            .upload-pic {
                white-space: nowrap;
                padding: 0 30rpx;
                color: #D5D5D5;
                font-size: 26rpx;

                .first {
                    color: #333;
                    margin-bottom: 20rpx;
                }
            }

            .imgs {
                padding: 20rpx 30rpx;

                img {
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 10rpx;
                }
            }

            .submit {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 30rpx 0;
                width: 100%;

                .nut-button {
                    width: 96%;
                    margin: 0 auto;
                }
            }
        }

        .star {
            color: red;
        }
    }

    .back-pop {

        .head {
            text-align: center;
            padding: 30rpx 0;
            font-weight: bold;
        }

        .type {
            width: 96%;
            margin: 0 auto;
            border-radius: 10rpx;
            background: #fff;
            padding: 0 30rpx;
            box-sizing: border-box;

            .select {
                font-weight: bold;
                padding: 20rpx 0;
            }

            .type-list {

                .item {
                    width: 180rpx;
                    height: 60rpx;
                    text-align: center;
                    line-height: 60rpx;
                    color: #6F6F6F;
                    border: 1rpx solid #CBCBCB;
                    border-radius: 10rpx;
                    margin-right: 10rpx;
                    font-size: 26rpx;
                }

                .item.active {
                    color: #196BFE;
                    border-color: #196BFE;
                    font-weight: bold;
                }
            }
        }

        .remark {
            white-space: nowrap;
        }

        .goods {
            width: 96%;
            height: 600rpx;
            overflow-y: auto;
            margin: 10rpx auto 0;
            border-radius: 10rpx;
            background: #fff;
            box-sizing: border-box;
            padding: 20rpx 0 60rpx;

            .order-lists {
                padding: 0 30rpx;

                .order-item {
                    margin-bottom: 20rpx;

                    .left {
                        img {
                            width: 200rpx;
                            height: 200rpx;
                        }

                        margin-right: 20rpx;
                    }

                    .middle {
                        width: 80%;
                        position: relative;

                        div:first-child {
                            font-size: 30rpx;
                            margin-bottom: 20rpx;
                        }

                        .line {
                            text-decoration: line-through;
                            font-weight: normal;
                            margin-left: 10rpx;
                            font-size: 26rpx;
                        }

                        div:nth-child(2) {
                            color: #6B7283;
                            font-weight: bold;
                        }

                        div.back-btn {
                            position: absolute;
                            right: -20rpx;
                            bottom: 80rpx;
                            transform: scale(1.2);
                        }

                        div.num {
                            font-size: 24rpx;
                            margin-top: 10rpx;
                        }

                        div.selNum {
                            margin-top: 10rpx;
                        }
                    }
                }

                .order-item:not(:last-child) {
                    border-bottom: 1rpx solid #F2F2F2;
                }
            }
        }

        .next {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            padding: 30rpx 0;

            .nut-button {
                width: 96%;
                margin: 0 auto;
            }
        }
    }
}
</style>